<!-- 物料清单提交-->
<template>
  <div class="root">
    <el-row :gutter="5">
      <el-col :span="5">
        <el-form ref="form"
                 :model="form"
                 label-width="100px"
                 style="width:600px"
                 enctype="multipart/form-data">
          <el-row>
            <el-col>
              <b><div style="margin-bottom: 20px;margin-left: 2px">不解析供应商列表</div></b>
            </el-col>
          </el-row>

        </el-form>
      </el-col>
    </el-row>
    <el-form
      label-position="left"
      style="padding:0px 0px 0px 0px"
    >
      <el-row>
        <el-col>
          <el-form-item >
            <span>供应商筛选</span>
            <el-input style="width: 200px" id="screen" v-model="s_supplierName" maxlength="150" ></el-input>
            <el-button type="primary" @click="selectSupplierName()" style="margin-bottom: 10px">筛选</el-button>
            <el-button type="success" @click="show_add_supplier()" style="margin-bottom: 10px">添加供应商</el-button>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>


    <el-table
      :data="list.slice((currentPage-1)*pagesize,currentPage*pagesize)"
      element-loading-text="Loading"
      border
      max-height="580"
      fit
      highlight-current-row
      v-loading = "listLoading"
    >
      <el-table-column align="center" label="供应商名称">
        <template slot-scope="techlist">
          <span>{{techlist.row.supplierName}}</span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        align="center" prop="created_at" label="删除">
        <template slot-scope="techlist">
          <el-button type="danger" icon="el-icon-delete" size="small" cirele @click="delete_supplier(techlist.row,techlist.$index)"></el-button>
        </template>
      </el-table-column>

    </el-table>

    <!--   修改日期时间用  dialog   -->
    <el-dialog title="修改天数" :visible.sync="inventorydialogFormVisible">
      <el-form :model="form_date">
        <el-row>
          <el-col>
            <span class="dialog-font" style="margin-bottom: 20px">需加天数</span>
            <el-input style="width: 100px" type="number" v-model="form_date.needAddDay"></el-input>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="inventorydialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateDay()">保存</el-button>
      </div>
    </el-dialog>

    <!--   设置多时间多百分比付款的dialog  dialog   -->
    <el-dialog :title="dialogTitle"  :visible.sync="multiple_inventorydialogFormVisible">
      <el-form :model="multiple_condition_data">
        <el-form ref="form"
                 :model="form"
                 label-width="200px"
        >
          <div v-for="(dataa,index) in multiple_condition_data.percentage_need_add_day_content ">
            <el-row style="margin-top: 10px">
              <el-col>
                <span>百分比输入:</span>
                <el-input style="width: 100px" type="number" v-model="dataa.percentage" placeholder="百分比"></el-input>
                <span >&#12288 &#12288</span>
                <span>需加天数输入:</span>
                <el-input style="width: 100px" type="number" v-model="dataa.need_add_day" placeholder="天数" ></el-input>
              </el-col>
            </el-row>
          </div>
          <el-form-item>
            <span >&#12288 &#12288</span>
          </el-form-item>
        </el-form>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="del()">删除</el-button>
<!--        <el-button type="primary" @click="addEquip()">提交</el-button>-->
        <el-button type="primary" @click="addInput()">添加</el-button>
        <el-button @click="multiple_inventorydialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="update_multiple_payment()">保存</el-button>
      </div>
    </el-dialog>


    <!--   设置多时间多百分比付款的dialog  dialog   -->
    <el-dialog title="添加供应商" :visible.sync="add_supplier_visible">
      <el-form>
        <el-form ref="form"
                 label-width="200px"
        >
          <div >
            <el-row style="margin-top: 10px">
              <el-col>
                <span>供应商名称:</span>
                <el-input style="width: 200px" v-model="addview_suppliername"  placeholder="与ERP保持一致"></el-input>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="insert_dont_supplier()">提交</el-button>
      </div>
    </el-dialog>


    <el-pagination
      align = "center"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="pagesize"
      layout="total, prev, pager, next"
      :total="list.length">
    </el-pagination>
  </div>
</template>

<script>

  import FileSelect from '../update/FileSelect.vue';
  import axios from 'axios';
  import { parseDateFull } from '@/api/DateFor';

  export default {
    components: {FileSelect},
    data() {
      return {
        //需加天数//
        inventorydialogFormVisible:false,//log页面是否显示
        form_date:{
          needAddDay:0,
          supplierName:'',
          index:0,
        },
        ////

        //多交期设置//
        ifHaveInventroyNumber:false,//是否有入库单号
        dialogTitle:"",
        multipleType:"", //是否有入库单号
        ////


        //添加供应商//
        add_supplier_visible:false,
        addview_suppliername:'',//名称
        addview_payaccount_period:'',//付款条件
        addview_need_add_day:'',//需要加天数
        //添加供应商//


        //仅百分比设置//
        only_percentage_visible:false,
        only_percentage_num:'',
        only_percentage_supplier_name:'',
        ////


        //同一个付款项拆成多个时间和百分比//
        multiple_inventorydialogFormVisible:false,//设置多条件是否显示
        multiple_condition_data:{
          index:0,
          supplierName:'',
          percentage_need_add_day_content:[{
            percentage:0,
            need_add_day:0,
          }],//循环的内容
        },
        ////

        //分页数据//
        currentPage:1, //初始页
        pagesize:20,    //每页的数据
        ////
        s_supplierName:'',//供应商名称(筛选用)
        s_supplierName_put:'',//供应商名称，输入用
        list:[],
        formLabelWidth: '120px',
        techlist:[],
        dataForm:{
          name: '',
          file: null
        },
        hasfile:false,
        logoList: [],
        address: '',
        checked:false,
        filelist:[],//upload的文件的数组
        fileData:'',//上传文件数据(多文件合一)
        form: {
          versionName:'',
          versionTag:'',
          name: '',
          file: null,
          color: '#ff0000'
        },
        imgUrl:
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        srcList: [this.imgUrl],
        thatList:[],//临时存list,用于筛选恢复用
      };
    },
    created: function() {
        this.init();
    },
    methods: {
      addInput(){
        this.multiple_condition_data.percentage_need_add_day_content.push({'percentage':0,'need_add_day':0});
      },
      del(){
        this.multiple_condition_data.percentage_need_add_day_content.splice(this.multiple_condition_data.percentage_need_add_day_content.length-1,1);
      },

      //设置百分比
      submit_dont_supplier(){
        let data = {"supplierName":this.only_percentage_supplier_name,"percentage":this.only_percentage_num};
        axios.post("/dont-parse-supplier/set_only_percentage",data).then(res => {
          if(res.data.code){
            this.$alert("提交成功");
            this.only_percentage_visible = false;
          }
          })
      },

      //列表筛选
      selectSupplierName(){
        let data = {"sName":this.s_supplierName};
        axios.post("/dont-parse-supplier/filter_supplier",data).then(res =>{
          let arr = [...JSON.parse(res.data.data)];
          this.list = arr;
        });
      },

      //插入供应商
      insert_dont_supplier(){
        let data = {"sName":this.addview_suppliername};
        axios.post("/dont-parse-supplier/insert_dont",data).then(res => {
            if(res.data.code === "20000"){
              let arr = [...JSON.parse(res.data.data)];
              this.list = arr;
              this.$alert("提交成功");
              this.add_supplier_visible = false;
              this.addview_suppliername = '';
            }
        })
      },
      //添加供应商页面显示
      show_add_supplier(){
        this.add_supplier_visible = true;
      },
      // //列表筛选
      // selectSupplierName(){
      //   let tmpList = [];
      //   debugger
      //   if(this.s_supplierName === '')
      //     this.list = this.thatList;
      //   for(var i = 0; i < this.list.length ; i++){
      //     let No = this.list[i].supplierName;
      //     let ct = this.s_supplierName;
      //     if(No.indexOf(ct) != -1 ){
      //       debugger
      //       tmpList.push(this.list[i]);
      //     }
      //   }
      //   tmpList.map(x => x.backGoods = '');
      //   this.list = tmpList;
      //   console.log(this.list);
      // },
      delete_supplier(row,index){
          var supplierName = row.supplierName;
        this.$confirm('确认删除吗').then( _ => {
          let data={"sName":supplierName};
          axios.post("/dont-parse-supplier/delete_dont",data).then(res =>{
              let arr = [...JSON.parse(res.data.data)];
              this.list = arr;
              this.$alert("删除成功");
          })
        }).catch( _ =>{

        })
      },
      //显示仅百分比页面
      show_only_percentage_view(row,index,type){
        this.only_percentage_visible = true;
        this.only_percentage_supplier_name = row.supplierName;
        //获得percentage数据
        //TODO 获得Percentage接口
        let data={"supName":this.only_percentage_supplier_name};
        axios.post("/supplier-account-multiple-situation/get_only_percentage",data).then(res =>{
          if(res.data.code === "20000"){
            this.only_percentage_num = res.data.data;
          }
        })
      },
      show_multiple_payment_change(row,index,type){
        if(type === 'have'){
          this.dialogTitle = "有入库单号交期拆分";
          this.multipleType = "have";
        }else if(type === 'no'){
          this.dialogTitle = "无入库单号交期拆分";
          this.multipleType = "no";
        }
        this.multiple_condition_data.supplierName = row.supplierName;
        this.multiple_condition_data.index = index;
        let data = {"supplierName":this.multiple_condition_data.supplierName,"haveIn":this.multipleType};
        axios.post('/supplier-account-multiple-situation/get_situation',data).then(res => {
          let arr = [...JSON.parse(res.data.data)];
          this.multiple_condition_data.percentage_need_add_day_content = [{
            percentage:0,
            need_add_day:0,
          }];
          if(arr.length != 0){//如果有值置空
            this.multiple_condition_data.percentage_need_add_day_content = [];
          }
          for(var i = 0; i < arr.length;i++){
            this.multiple_condition_data.percentage_need_add_day_content.push({'percentage':arr[i].percentage,'need_add_day':arr[i].needAddDay})
          }
          debugger
          //完成之后再打开
          this.multiple_inventorydialogFormVisible = true;
          // this.multiple_condition_data.percentage_need_add_day_content = ;
        })
      },
      //处理更改的天数那一列//
      showAlterDayLog(row,index){
        this.inventorydialogFormVisible = true;
        this.form_date.needAddDay = row.realNeedAddDay;
        this.form_date.supplierName = row.supplierName;
        this.form_date.index = index;
      },
      update_multiple_payment(){
        let data = {"sName":this.multiple_condition_data.supplierName,"percentage_day_content":this.multiple_condition_data.percentage_need_add_day_content,"haveIn":this.multipleType};
        axios.post("/supplier-account-multiple-situation/update_situation",data).then(res =>{
          if(res.data.code === "20000"){
            debugger
            //TODO 把日期循环显示出来
            console.log(this.multiple_condition_data.index);
            this.$alert(res.data.data);
            this.multiple_inventorydialogFormVisible = false;
          }
          this.listLoading = false;
        }).catch( f => {
          this.listLoading = false;
        })
      },
      updateDay(){
        let data = {"day":this.form_date.needAddDay,"sName":this.form_date.supplierName};
        axios.post("/supplier-account-period/update-need-add-day",data).then(res =>{
          if(res.data.code === "20000"){
            debugger
            console.log(this.form_date.index);
            this.list[this.form_date.index].realNeedAddDay = this.form_date.needAddDay;
            this.$alert(res.data.data);
            this.inventorydialogFormVisible = false;
          }
          this.listLoading = false;
        }).catch( f => {
          this.listLoading = false;
        })
      },
      ////
      //分页//
      handleSizeChange: function (size) {
        this.pagesize = size;
        console.log(this.pagesize)  //每页下拉显示数据
      },
      handleCurrentChange: function(currentPage){
        this.currentPage = currentPage;
        console.log(this.currentPage)  //点击第几页
      },
      ////

      parseDate(date){
        return parseDateFull(date);
      },

      onChange(e){
        console.log(`checked"+ ${e.target.checked}`)
      },

      clickpush(){
        this.$refs.upload.submit();  //让httprequest执行,而不是去主动执行这个func
      },

      /**
       * 初始化所有供应商账期列表
       */
      init(){
        this.listLoading = true;
        axios.get("/dont-parse-supplier/getall_dont").then( res => {
          if(res.data.code == "20000"){
            let arr = [...JSON.parse(res.data.data)];
            this.list = arr;
            this.thatList = arr;//存一下list用于恢复
          }
          this.listLoading = false;
        }).catch( res => {
              this.listLoading = false;
            }
        )
      },


      // handlechange(file,filelist){
      //   if(filelist.length ==1){
      //     this.hasfile = true;
      //   }
      //   this.form.file = file;
      // },

      handleremove(file,filelist){
        this.filelist = filelist;
      },
      //提交文件
      uploadFile(file){
        this.fileData.append('files',file.file);
      },
      //上传到服务器
      submitUpload(){
        if(this.filelist.length === 0){
          this.$message({
            message:'请先选择文件',
            type:'warning'
          })
        }else {
          const isLt100M = this.filelist.every(file => file.size / 1024 / 1024 < 100);
          if (!isLt100M) {
            this.$message.error('请检查，上传文件大小不能超过100MB!');
          }else{
            this.fileData = new FormData();
            this.$refs.upload.submit();//提交调用uploadFile函数
            let config ={
              headers:{
                'Content-Type' : 'multipart/form-data'
              },
              transformRequest:[ function(data) {
                return data;
              }]
            };
            axios.post('/supplier-account-period/import-supplier-account-period',this.fileData,config).then((res) =>{
              console.log(res);
              if (res.data.code == "20000"){
                this.openM();
                this.filelist = [];
              }else if(res.data.code == "40001"){
                this.$alert("第"+ res.data.data +"个文件出错");
              }else if(res.data.code == "40000"){
                this.$alert(res.data.data);
              }else if(res.data.code == "40003"){
                this.$alert(res.data.data);
              }else if(res.data.code == "40005"){
                this.$alert(res.data.data);
              }else {
                this.$alert(res.data.data);
              }
            })
          }
        }
      },
      handleCHange(file,fileList){
        let existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name);
        if (existFile) {
          this.$message.error('当前文件已经存在!');
          fileList.pop();
        }
        this.filelist = fileList;
      },


      pushInvenFile(val) {
        //首先拿到地址
        if (val.file == null) {
          this.$message.warning('请先选择要上传的文件');
          return false;
        }
        //取出refs.upload中的文件
        // uploadFile = this.$refs.upload.submit();
        let formDParams = new FormData();
        formDParams.append('file', val.file);//filename是键 file是值
        let config ={
          headers:{
            'Content-Type' : 'multipart/form-data'
          },
          transformRequest:[ function(data) {
            return data;
          }]
        };
        axios.post('/material-list/import-material-list',formDParams,config).then((res) => {
          console.log(res);
          if (res.data.code == "20000"){
            // let arr = [...JSON.parse(res.data.data)];
            // debugger
            // this.list = arr;
            // console.log(arr);
            // this.techlist = this.list;
            this.openM();
          }else if(res.data.code == "40001"){
            this.$alert("第"+ res.data.data +"个文件出错");
          }else if(res.data.code == "40000"){
            this.$alert(res.data.data);
          }else if(res.data.code == "40003"){
            this.$alert(res.data.data);
          }else if(res.data.code == "40005"){
            this.$alert(res.data.data);
          }else {
            this.$alert(res.data.data);
          }
        });
        // this.$http({
        //   url:'/web/push',
        //   headers: {'Content-Type': 'multipart/form-data;boundary=10'},//定义内容格式,很重要
        //   method: 'POST',
        //   formDParams
        // }).then(function(res) {
        //   debugger
        //   console.log(res);
        // });
      },
      openM() {
        this.$alert("解析成功");
      },
      publish(){
        //请求publish接口即可
        axios.get('/web/publishcold').then( (response) =>{
          debugger
          console.log(response.data);
          if(response.data.code == "20000"){
            this.openM()
          }
        });
      },
      getfile2Path(){
        this.$http.get('/web/getversion/main')
            .then(
                response => {
                  this.info = response.data;
                  console.log(this.info.data.filePath);
                  this.address = this.info.data.filePath;
                  // let strJ = JSON.parse(this.info)
                  // this.address = strJ.filePath
                  // // console.log('address',this.address)
                  // this.$message.info(this.address)
                  // console.log(this.address)

                }
            );
      }
    }
  };
</script>

<style>
  .choose-color{
    z-index: 9999;
    /* width: 210px; */
  }
  .line {
    text-align: center;
  }
  .img-wrap {
    width: 100%;
    height: 500px;
    margin-left: 68px;
  }
  .box{
    width: 220px !important;
  }
</style>
